<template>
    <div>
        <!-- 首页轮播图 -->
    <van-swipe class="my-swipe"  :autoplay="3000" indicator-color="white" >
        <van-swipe-item v-for="image in images" :key="image.id"><img class="img" :src="image.img" alt="图片丢咯"/></van-swipe-item>
    </van-swipe>

        <!-- 九宫格 -->
       <van-grid :border="false" :column-num="3">
        <van-grid-item to="/newslist">
          <img src="../../assets/img/menu1.png" alt=""><p>新闻资讯</p>
        </van-grid-item>
        <van-grid-item to="/photo/list">
          <img src="../../assets/img/menu2.png" alt=""><p>图片分享</p>
        </van-grid-item>
        <van-grid-item to="/goods/list">
          <img src="../../assets/img/menu3.png" alt=""><p>商品购买</p>
        </van-grid-item>
          <van-grid-item to="/contact">
          <img src="../../assets/img/menu6.png" alt=""><p>联系我们</p>
        </van-grid-item>
          <van-grid-item>
          <img src="../../assets/img/menu4.png" alt=""><p>留言反馈</p>
        </van-grid-item>
          <van-grid-item>
          <img src="../../assets/img/menu5.png" alt=""><p>视频专区</p>
        </van-grid-item>
      </van-grid>
    </div>
</template>
<script>
export default {
  data () {
    return {
    // 存储图片地址
      images: []
    }
  },
  created () {
    this.getlunbo()
  },
  methods: {
    // 获取轮播图数据
    async getlunbo () {
      const { data: res } = await this.$http.get('/api/getlunbo')
      this.images = res.message
    }
  }
}
</script>
<style scoped lang="less">
.my-swipe {
    height: 200px;
    background: #ddd;
    border-bottom: 1px solid #ccc
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.img {
    width: 100%;
    height: 100%;
}

.van-grid-item__content p {
    margin-top: 10px;
}
.van-grid-item__content img[data-v-25b29fc6] {
    width: 60px;
    height: 60px;
}
p {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}
</style>
